<template>
    <div class="clearFix initiateing">
      <div v-if="!isFail" class="ing">
        <img src="../../imgs/qrcode.png" alt="">
        <p class="status">设备启动中...</p>
        <p class="tip">设备启动需要一点时间，请稍等...</p>
        <div class="progress-box">
          <progressbar v-model="progress" :type="type" animate></progressbar>
        </div>
      </div>
      <div v-else-if="isFail" class="fail">
        <img src="../../imgs/qrcode.png" alt="">
        <p class="status">设备启动超时...</p>
        <p class="tip">设备可能有点不给力哦， 您可以投诉建议给 <br>商家，或者寻找其他设备</p>
        <div class="complaint-warp">
          <router-link class="complaint" to="/feedback">投诉建议</router-link>
        </div>
      </div>
    </div>
</template>
<script>
  import { mapState } from 'vuex';
  import progressbar from 'components/progressbar';
  import * as api from 'api';
  export default {
    data () {
      return {
        isFail: false,
        progress: 0,
        type: 'info' // success warning danger info
      }
    },

    methods: {
      queryStatus () {
        api.queryUserOrderList({
          userId: this.userId,
          status: '2'
        })
          .then(res => {
            if (res.resultData[0]) {
              if (res.resultData[0].status === '2') {
                setTimeout(() => {
                  this.$router.push(`/orderLoading/${this.openId}`)
                }, 1000)
              }
            }
          })
      }
    },

    computed: {
      ...mapState({
        userId: state => state.userInfo.id,
        openId: state => state.userInfo.openId
      })
    },

    components: {
      progressbar
    },

    mounted () {
      let timer = setInterval(() => {
        ++this.progress;
        if (this.progress >= 100) {
          clearInterval(timer);
          this.type = 'warning';
          this.isFail = true;
        }
        if (this.progress % 27 === 0) {
          this.queryStatus();
        }
      }, 100)
    }
  }
</script>
<style lang="scss" scoped="">
  @import '../../styles/common/common';
  @import '../../styles/common/mixin';
  .initiateing {
    width: 100%;
    height: 100%;
    color: #fff;
    @include bis('../../imgs/pg-bg.png');
    .ing,.fail {
      text-align: center;
      margin-top: px2rem(170);
      img {
        display: inline-block;
        width: px2rem(479);
        height: px2rem(322);
        margin: 0 auto;
      }
      .status {
        padding-top: px2rem(30);
        font-size: px2rem(33);
        letter-spacing: px2rem(5);
      }
      .tip {
        font-size: px2rem(24);
        padding-top: px2rem(50);
        letter-spacing: px2rem(3);
        color: #cddadd;
        font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1", Arial, sans-serif;
      }
    }
    .ing span {
      @include bis('../../imgs/initing.gif');
    }
    .fail span {
      @include bis('../../imgs/fail.gif');
    }
    .complaint-warp {
      margin-top: px2rem(50);
      .complaint {
        margin-top: px2rem(50);
        padding: px2rem(25) px2rem(50);
        @include borderRadius(px2rem(40));
        border: none;
        background-color: rgba(255, 255, 255, 0.3);
        color: #fff;
        letter-spacing: px2rem(3);
      }
    }
    .qr-code {
      position: absolute;
      bottom: px2rem(30);
      height: px2rem(341);
      width: px2rem(463);
      @include bis('../../imgs/qrcode.png');
      margin: 0 auto;
    }
    .progress-box {
      width: 80%;
      margin: 0 auto;
      margin-top: px2rem(100);
    }
  }
</style>
}
